<template>
  <div style="width: 300px">
    <el-tabs style="width: 270px">
      <el-tab-pane label="电子围栏">
        <div class="treedata">
          <el-tree
            ref="tree"
            :data="lists"
            show-checkbox
            node-key="id"
            :expand-on-click-node="false"
            :render-content="renderContent"
            :props="areaProps"
            accordion
            @check="checkNode"
          >
            <!-- @check-change="handleCheckChange" -->
          </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :visible.sync="addPop.show"
      width="95%"
      center
      :title="addPop.title"
    >
      <bindingCompany v-if="addPop.show" :toEdit="toEdit"></bindingCompany>
    </el-dialog>

    <el-dialog
      title="选择围栏类型"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <div class="flex-center" style="width: 100%">
        <el-select
          v-model="shape"
          placeholder="请选择活动区域"
          style="width: 300px"
        >
          <el-option label="多边形" value="polygon"></el-option>
          <el-option label="圆" value="circle"></el-option>
          <!-- <el-option label="多边形" value="2"></el-option>
        <el-option label="圆" value="6"></el-option> -->
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getShape()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bindingCompany from "./binding";
import api from "@/api/location/fence";

export default {
  components: {
    bindingCompany,
  },
  data() {
    return {
      toEdit: 0,
      lists: [],
      addPop: {
        show: false,
        title: "",
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      shape: "",
      cityId: "",
      areaProps: {
        children: "children",
        label: "name",
      },
    };
  },
  mounted() {
    this.getAearTree();
  },
  methods: {
    // 获取电子围栏树
    getAearTree() {
      api.treeList().then((res) => {
        console.log(res);
        if (res.code == 200) {
          // this.$set(this, "lists", this.listTree(res.data));
          this.$set(this, "lists", res.data);
        }
        console.log(this.areaTree);
      });
    },
    // =============
    //选择围栏类型
    getShape() {
      this.dialogFormVisible = false;
      // alert(this.shape)
      let data = {};
      data.value = this.shape;
      data.cityId = this.cityId;
      // this.append(data)
      this.$emit("afterAddGraph", data);
      this.$emit("gotoCity", this.cityId);
    },
    treeAjax() {
      this.$api
        .fenceTree()
        .then((res) => {
          let newArr = JSON.parse(JSON.stringify(this.listTree(res.data)));
          this.lists = JSON.parse(
            JSON.stringify(newArr).replace(/name/g, "label")
          );
          //console.log(this.lists)
        })
        .catch((err) => {});
    },
    append(data) {
      this.cityId = data.id;
      this.dialogFormVisible = true;
      // console.log(data);
      // this.$emit('addGraph',data)
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      // this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },
    binding(data) {
      console.log("绑定", data);
      this.addPop.title = data.name + "-车辆绑定信息";
      this.toEdit = data.id;
      this.addPop.show = true;
    },
    modification(data) {
      console.log("修改", data);
      // 先判断当前是否被勾选上，再调用
      // this.$emit("mapInfo", [data]);
      this.$emit("mapInfo", [data]);
      this.$emit("polyEditor", data);
    },
    info(data) {
      console.log("详情", data);
    },
    del(data) {
      console.log("删除", data);
      this.$confirm(`此操作将永久删除${data.name}, 是否继续?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api
            .delFence(data.id)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功！",
                  type: "success",
                });
                // this.$emit('refresh')
                // this.treeAjax();
                this.getAearTree();
              } else {
                this.$message({
                  message: `${res.message}`,
                  type: "warning",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCheckChange(data, checked, indeterminate) {
      let checkNode = this.$refs.tree.getCheckedNodes();
      let arr = checkNode.map((e) => {
        return e.id;
      });
      let dataArr = arr.join(",");
      var reg = /^[\'\"]+|[\'\"]+$/g;
      let str = dataArr.replace(reg, " ");
      // 获取围栏信息
      this.$api.getFenceConfig({ id: str }).then((res) => {
        this.$emit("mapInfo", res.data);
      });
      this.$emit("select", str);
    },
    checkNode(node, data) {
      console.log(node, data);
      console.log("=======>", data.checkedNodes.length > 0);
      if (data.checkedNodes.length > 0) {
        let idarr = [];
        data.checkedNodes.forEach((item, i) => {
          if (item.levelType == 4) {
            idarr.push(item.id);
          }
        });
        console.log("=====nodeids", idarr);

        if (idarr.length > 0) {
          // 获取围栏信息
          api.fenceDetail(idarr.toString()).then((res) => {
            this.$emit("mapInfo", res.data);
            // console.log("======id获取围栏信息====>", res.data);
          });
        }
        this.$emit("select", idarr); //查询表格数据
      } else {
        this.$emit("mapInfo", []); //
        this.$emit("select", []);
      }
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    renderContent(h, { node, data, store }) {
      if (data.levelType == 2) {
        return (
          <div class="custom-tree-node">
            <span>{node.label}</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="增加"
              placement="top-start"
            >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-plus"
                on-click={() => this.append(data)}
                class="ml16"
              ></el-button>
            </el-tooltip>
          </div>
        );
      } else if (data.levelType == 4) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-tooltip
                class="item"
                effect="dark"
                content="绑定"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-star-off"
                  class="ml16"
                  on-click={() => this.binding(data)}
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  class="ml16"
                  on-click={() => this.modification(data)}
                ></el-button>
              </el-tooltip>
              {/* <el-tooltip
                class="item"
                effect="dark"
                content="详情"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-tickets"
                  class="ml16"
                  on-click={() => this.info(data)}
                ></el-button>
              </el-tooltip> */}
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  class="ml16"
                  on-click={() => this.del(data)}
                ></el-button>
              </el-tooltip>
            </span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      }
    },
    listTree(list, p) {
      return list.filter((e) => {
        let pid = e.pid;
        let newArr = list.filter((ele) => {
          if (ele.id == pid) {
            if (!ele.children) {
              ele.children = [];
            }
            ele.children.push(e);
            return true;
          }
        });
        return newArr.length == 0;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.treedata {
  height: calc(60vh - 90px) !important;
  overflow-y: scroll;
}
::v-deep .custom-tree-node {
  font-size: 12px;
}

::v-deep .item {
  visibility: hidden;
}
::v-deep .el-tree-node__content:hover .item {
  visibility: visible;
}

::v-deep .el-tabs__nav .is-top {
  margin-left: 10px;
}
// ::v-deep .el-tree {
//   // width: 200px;
//   // overflow: scroll;
// }
::v-deep .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
::v-deep .el-dialog__body {
  padding: 10px;
}
// ::-webkit-scrollbar {
//   width: 18px;
//   height: 18px;
// }

// ::-webkit-scrollbar-track,
// ::-webkit-scrollbar-thumb {
//   border-radius: 999px;
//   border: 5px solid transparent;
// }

// ::-webkit-scrollbar-track {
//   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
// }

// ::-webkit-scrollbar-thumb {
//   min-height: 20px;
//   background-clip: content-box;
//   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
// }

// ::-webkit-scrollbar-corner {
//   background: transparent;
// }
</style>
